<template>
    <div class="content-container">
        <Title :icon="'pie-chart-fill'" :title="'各平台占比'"></Title>
        <div class="h-360px" id="platformPercentage">

        </div>
    </div>
</template>

<script setup lang="ts">
import Title from '@/components/Title/index.vue'
import * as echarts from 'echarts'
import { getPlatformQuestionApi } from '@/api/geoBasic/index'
import { IProblem,IPie } from '@/api/geo/types'

const route = useRoute()

const state = reactive({
    problemData: <IProblem[]>[]
})

watch(() => state.problemData, (newVal) => {
    if (newVal.length) {
        const chartDom = document.getElementById('platformPercentage');
        const myChart = echarts.init(chartDom);

        let array = <IPie[]>[]
        let option

        state.problemData.forEach(item => {
            array.push({
                value: item.Value,
                name: item.Name + item.Proportion,
            })
        })

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0',
                left: 'center',
                orient: 'horizontal'
            },
            series: [
                {
                    name: '各平台占比',
                    type: 'pie',
                    radius: ['55%', '40%'],
                    center: ['52%', '60%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: array
                }
            ]
        };

        option && myChart.setOption(option);
    }
})

async function getPlatformQuestion(url:string,id?:any){
    const res:ResType = await getPlatformQuestionApi(url,id)
    if(res.code === 200){
        state.problemData = res.data
    }  
}

function getRoutePath(id?:any) {
    getPlatformQuestion("/GEOBasicCustomerApi/GetKeywordProportion",{
        skip:id
    })
}

onMounted(() => {
    const { skip } = route.query
    if(skip){
        getRoutePath(skip)
    }else{
        getRoutePath()
    }
    
})

</script>

<style scoped></style>